<template> 

<div id="tianjia"> 
        <div style="display: flex;justify-content:space-between;"><div @click="$router.go(-1)" style="margin:.1rem auto;">取消新建</div><div @click="mm" style="margin:.1rem auto;">提交</div></div> 
        <div style="display: flex;justify-content: space-around;margin:.1rem auto;">
            <div>编辑</div>
        </div>
        <div style="width: 98%;display: flex;flex-wrap: wrap;margin:.1rem auto;">
            <div style="width:100%;display: flex;justify-content: space-around;margin:.1rem 0;"><span>title</span><input v-model="title" style="border: none;outline: none;" type="text" placeholder="请输入标题"></div>
            <div style="width:100%;display: flex;justify-content: space-around;flex-wrap: wrap;margin:.1rem 0;"><span>text</span><textarea name="" id="" placeholder="请输入内容" style="border: none;outline: none;width: 100%;height:2rem;resize:none" v-model="text"></textarea></div>
        </div> 
    </div>




</template>
<script>
import { Dialog } from "vant";
export default {
  name: "theme",
  data() {
    return {
      title: "",
      text: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    mm() {
      let a = JSON.parse(window.localStorage.getItem("user"));
      let b = this.title;
      let c = this.text;
      if(b.length>=8 && c.length>=8){
          let data = { accesstoken: a.acc, title: b, tab: "dev", content: c };
          Dialog.confirm({
        title: "提交",
        message: "请确认是否已完成编辑,可否提交",
      })
        .then(() => {
          // on confirm 
          axios
            .post(`https://cnodejs.org/api/v1/topics`, data)
            .then((res) => {
              this.$router.push("/"); 
            })
            .catch((err) => {
              Dialog.alert({
                title:'提交',
                message:'提交次数受限,你可以继续浏览首页内容',
              }).then(()=>{
                this.$router.push("/");
              })
            });
        })
        .catch(() => {
          // on cancel
          console.log("取消");
        });
      }else{
Dialog.alert({
        title: "title标题/主题内容不能少于8个字符",
        message: "请继续编辑",
      }).then(() => {
        // on close
      });
      }
      

      

      
    },
  },
};
</script>
<style scoped lang="scss">
#tianjia{
    width: 100vw;
    height: 100vh;
    font-size: .2rem;
    background-image: linear-gradient(
    -225deg,
    #9efbd3 0%,
    #57e9f2 48%,
    #45d4fb 100%
  );
    input,textarea{
      background: transparent;
    }
}

</style>